<script setup lang="ts">
  import { FormInstance } from 'element-plus'
  import { ref } from 'vue'

  defineOptions({
    name: 'BaseInfoFeeStandardCreate',
  })

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  // 表单
  const form = ref({
    name: '',
    mobileShow: true,
  })

  // 校验规则
  const rules = {
    name: [{ required: true, message: '请输入费用标准名称', trigger: ['blur', 'change'] }],
  }

  defineExpose({
    setForm: (name: string, mobileShow: boolean) => {
      form.value.name = name
      form.value.mobileShow = mobileShow
    },
    getForm: (): Promise<typeof form.value | null> => {
      return new Promise((resolve) => {
        if (formInstance.value) {
          formInstance.value
            .validate()
            .then(() => {
              resolve({ ...form.value })
            })
            .catch(() => {
              resolve(null)
            })
        }
      })
    },
  })
</script>

<template>
  <div class="service-cost-standard-base-info">
    <div class="title">基本信息</div>
    <el-form ref="formInstance" inline-message :model="form" :rules="rules">
      <el-form-item label="收费标准名称" prop="name">
        <el-input
          v-model.trim="form.name"
          maxlength="20"
          clearable
          placeholder="请输入收费标准名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="移动端是否显示">
        <div class="switch-container">
          <el-switch v-model="form.mobileShow"></el-switch>
          <div class="tip">{{ form.mobileShow ? '显示' : '隐藏' }}</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
  .service-cost-standard-base-info {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    :deep(.el-form) {
      padding: 0 12px;
      display: flex;
      column-gap: 72px;

      .el-form-item {
        .el-form-item__label {
          height: 28px;
          line-height: 28px;
        }

        .el-form-item__content {
          flex-direction: column;
          align-items: flex-start;

          .el-input {
            width: 200px;
          }

          .el-form-item__error {
            margin: 0;
          }

          .switch-container {
            height: 28px;
            display: flex;
            align-items: center;
            column-gap: 5px;
          }
        }
      }
    }
  }
</style>
